Custom Video Player客製化播放器

video當你想讓使用者自己去控制音量、播放位置的時候，可以在標籤上加上controls。

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

可能會覺得這個樣式滿陽春的，但簡單明瞭。如果想要讓他花俏一點，就會想要自己切一個控制器．這時候標籤上就不需要加上controls。
這次的練習成品如下：
個人codepen

技巧點

1. 物件取值

• 點記法 (Dot notation)
  存取物件的屬性與函式，很常會用到.的方式取特定的資料

const student = {
 name: "jack",
 age: 18,
 birthday: "10/10",
 777: "lucky number",
}
console.log(student.name); // "jack";

• 括弧記法 (Bracket notation)
  另一種存取物件的屬性與函式的方式，有點像是陣列取值的概念．透過物件中的名稱來取值．

const student = {
 name: "jack",
 age: 18,
 birthday: "10/10",
 777: "lucky number",
}
console.log(student["name"]); // "jack";

• 兩種使用上都可以，但有一種情況下，當物件中的key值為數字時，你無法使用點記法．這時候只能用括弧記法．

console.log(student.777); // 報錯
console.log(student[777]); // "lucky number"

• 這次練習中，要使用到video的方法．這時候用上括弧記法就非常簡潔．

function togglePaly() {
  const method = video.paused ? "play" : "pause"; // 三元運算判斷播放方法
  video[method](); // 括弧記法執行函式
}

2. video標籤具有的屬性和方法

• play() 播放影片
• pause() 暫停影片
• timeupdate 監聽影片播放的秒數位置事件
• paused 得到影片目前是暫停與否的布林值
• duration 得到影片的總長度（總秒數）
• playbackRate 影片的播放倍速
• volume 影片的音量

方法眾多，可以參考w3cSchool的整理

3.offsetX、offsetWidth

滑鼠事件的觸發，可以獲取相關的屬性：

• offsetX取得滑鼠位置相對於此容器的左側距離．為x軸上（從左到右）
• offsetWidth取得此元素的容器寬度
• 讓使用者去控制他想播放的影片位置．這時候就需要知道使用者目前點擊的位置在哪裡offsetX．以及整個播放進度條的總長度offsetWidth．兩者相除之後，乘上影片的總秒數，就可以知道使用者想播放的影片位置秒數．

function scrub(e) {
  const time = e.offsetX / progress.offsetWidth * video.duration;
  video.currentTime = time;
  // currentTime 為影片目前播放的位置秒數
}

心得

video影片很少接觸到，有什麼屬性和事件可以操作都要去查一下。一開始自己寫的時候，用到了playing的事件監聽，再去控制播放進度條，再去設定影片秒數，但是快轉秒數時也需要同步調整進度條，使用者點擊進度條的時候，也要去調整．整個好麻煩。

而影片中使用到了timeupdate，只要去監聽播放秒數是否有變化，就同步進度條。
當使用者操作進度條的時候，也只需要去變更播放秒數，進度條就自動更新．變得很簡單明瞭，好厲害！